<template>
  <!-- <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div> -->

  <div class="bgi">
    <div class="content">
        <el-row style="color: #4ea1ca; text-align: center;">
          <el-col :span="9" style="margin-top: 15px;cursor: pointer;font-size: 18px;">
            <div style="width: 100%;border-bottom: 3px solid #173269;padding-bottom: 15px;">
              <div style="visibility: hidden;">
                <span>123</span>
                <i class="el-icon-refresh" style="padding-left: 5px;"></i>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <dv-decoration-11 style="width:100%;height:80px;">
              <span class="htmlFont">临沂大学劳动教育数据展示</span>
            </dv-decoration-11>
          </el-col>
          <el-col :span="9" style="margin-top: 15px;font-size: 20px;">
            <div style="width: 100%;border-bottom: 3px solid #173269;padding-bottom: 15px;">
              {{ now | getTime }}
            </div>
          </el-col>
        </el-row>
      <!-- <div class="w100 rowsc rowsm fs-40 fw-b colfff mb-30 pt-16" style="position: relative;">
        <div class="">临沂大学劳动教育数据展示</div>
        <div class="fs-20 colfff" style="position: absolute;right: 30px;">{{ now | getTime }}</div>
      </div> -->
      <el-row :gutter="20" class="mt-10">
        <el-col :span="8">
          <div class="borderStyle pt-20">
            <div class="w100 h-450" id="bar"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="w100 rowsc rowsm mb-20 colfff fs-24" style="justify-content: space-around;">
            <div class="rowscl rowsm">
              <div class="">学生参与率</div>
              <div class="fw-b">{{ allParticipationRate || 0 }}%</div>
            </div>

            <div class="rowscl rowsm">
              <div class="">参与人次</div>
              <div class="fw-b">{{ allParticipants || 0 }} 人</div>
            </div>
          </div>
          <div class="w100 h-370" id="line"></div>
        </el-col>
        <el-col :span="8">
          <div class="borderStyle pt-20">
            <div class="w100 h-450" id="pie"></div>
          </div>
        </el-col>
      </el-row>
      
      <div class="borderStyle mt-20 pt-20">
        <div class="w100 h-400" id="barAll"></div>
      </div>
    </div>

    <el-dialog title="" :visible.sync="dialogTableVisible">
      <dv-border-box-10>
        <el-table :data="gridData" width="500">
          <el-table-column property="xyName" label="学院名称"></el-table-column>
          <el-table-column property="njName" label="年级名称"></el-table-column>
          <el-table-column property="value" label="人均得分" width="80">
            <template slot-scope="scope">
              {{ scope.row.value || 0 }}
            </template>
          </el-table-column>
        </el-table>
      </dv-border-box-10>
    </el-dialog>
  </div>
</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'.
import * as echarts from "echarts";
import axios from "axios";

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',

      now: 0,
      timer: '',
      allParticipants: '',
      allParticipationRate: '',
      centerData: []
    }
  },
  created() {
    this.getAllTopData();
    const now = new Date()
    this.now = now.getTime()
    this.timer = setInterval(() => {
      const now2 = new Date()
      this.now = now2.getTime()
    }, 1000)
  },
  mounted() {
    this.getBarData()
    this.getLineData()
    this.getPieData()
    this.getBarAllData()
  },
  methods: {
    openDialog() {
      this.dialogTableVisible = true
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      Axios.get('/large/screen/getLeftMoreDataCopy')
        .then(response => {
          this.gridData = response.data.rows.filter(item => item.value != 0);
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    },

    getAllTopData() {
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      Axios.get('/large/screen/getTopData')
        .then(response => {
          this.allParticipants = response.data.data.allParticipants;
          this.allParticipationRate = response.data.data.allParticipationRate;
          this.centerData = response.data.data.centerVoList
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    },

    async getBarData() {
      const bar = echarts.init(document.getElementById('bar'))
      let option = null
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      // const response = await Axios.get('/large/screen/getLeftData');
      const response = await Axios.get('/large/screen/getLeftDataCopy');
      // 设置数据
      let xyNames = response.data.data.filter(item => item.values != 0).slice(0, 8);
      xyNames = xyNames.map(item => {
        if (item.xyName.length > 7) {
          return item.xyName.substring(0, 7) + '...';
        } else {
          return item.xyName
        }
      });

      option = {
        title: {
          text: '劳动教育人均得分柱状图 ',
          // subtext: 'Fake Data',
          left: 'center',
          top: '0',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '40',
          textStyle: {
            color: '#fff'
          }
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
            myTool1: {
              show: true,
              title: '更多',
              icon: 'image://http://ldjy.zxcvii.top/file/zb4.png',
              // onclick: () => this.openDialog(),
              onclick: this.openDialog.bind(this),
              iconStyle: {
                color: '#fff',
              },
              emphasis: {
                iconStyle: {
                  color: '#fff',
                },
              },
            }
          }
        },
        color: ['#748ede', '#c9a363', '#ca7338', '#97f3a0', '#b356cb', '#d777ed', '#18bc23', '#72f37b'],
        grid: {
          left: '3%',
          right: '40',
          bottom: '3%',
          top: '100',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xyNames,
            name: '学院',
            axisLabel: {
              rotate: 10,
              margin: 15,
              padding: [0, -20, 0, 0],
              interval: 0,
              textStyle: {
                color: '#FFFFFF',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#142452' // 修改 X 轴线的颜色
              }
            }
          }
        ],
        textStyle: {
          color: '#fff'
        },
        yAxis: [
          {
            type: 'value',
            name: '平均',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#142452'
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            data: response.data.data.filter(item => item.values != 0).slice(0, 8).map(item => item.values),
            label: {
              show: true,
              position: "insideTop",
              color: '#fff'
            },
            // itemStyle: {
            //   borderRadius: [10, 10, 0, 0], // 设置顶部圆角
            // },
          },
        ],
      };

      bar.setOption(option)
    },
    async getLineData() {
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      const response = await Axios.get('/large/screen/getTopData');

      // 设置数据
      this.allParticipants = response.data.data.allParticipants;
      this.allParticipationRate = response.data.data.allParticipationRate;
      this.centerData = response.data.data.centerVoList;


      const line = echarts.init(document.getElementById('line'))
      let option = null
      let outMouth = this.centerData.map(item => item.month)
      let outPeoples = this.centerData.map(item => item.number)

      option = {
        title: {
          text: '劳动教育平台使用变化折线图',
          left: 'center',
          top: '30',
          textStyle: {
            color: '#fff'
          }
        },
        textStyle: {
          color: '#ffffff'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['学生参与率'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '40',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          name: '年月',
          boundaryGap: false,
          data: outMouth,
          axisLine: {
            lineStyle: {
              color: '#142452' // 修改 X 轴线的颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '人数',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#142452'
            }
          }
        },
        series: [
          {
            name: '参与人数',
            type: 'line',
            // stack: 'Total',
            lineStyle: {
              color: 'rgb(86,238,238)' // 这里设置线条颜色为红色，你可以更改为你想要的颜色
            },
            data: outPeoples
          },
          // {
          //   name: '登录人数',
          //   type: 'line',
          //   // stack: 'Total',
          //   data: [2200, 1820, 1910, 2340, 2900, 3300, 3100]
          // },
        ]
      };
      line.setOption(option)

    },
    async getPieData() {
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      const response = await Axios.get('/large/screen/getRightData');

      // 设置数据
      let data = response.data.rows.filter(item => item.value != 0);
      const pie = echarts.init(document.getElementById('pie'))
      let option = null
      option = {
        title: {
          text: '基础劳动类别占比饼状图',
          // subtext: 'Fake Data',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        textStyle: {
          color: '#fff'
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: '3%',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: true
        },
        legend: {
          orient: "horizontal",
          bottom: 'bottom',
          show: false,
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: ' ',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                formatter: function (params) {
                  const forName = params.name.length >= 8 &&  params.name.length < 15 ? (params.name.slice(0, 8) + '\n' + params.name.slice(8)) : params.name.length >= 15 ? params.name.slice(0, 8) + '\n' + params.name.slice(8, 16) + '\n' + params.name.slice(16) : params.name;
                  return '\n' + forName + '  ' + params.value + '%';
                },
                show: true,
                position: 'outside', // 标签显示在扇形图外侧
                textStyle: {
                  color: '#fff',
                  fontSize: 12, // 设置字体大小
                  lineHeight: 16 // 设置行高
                }
              }
            }
          }
        ]
      };


      pie.setOption(option)

    },
    async getBarAllData() {
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      const response = await Axios.get('/large/screen/getBottomData');
      let xys = response.data.data.xys
      let series = response.data.data.series
      series.forEach(v => {
        v.barWidth  = '30%' // 柱子的宽度，可以调整为更小的值，如 '30%'
      })

      const barAll = echarts.init(document.getElementById('barAll'))
      let option = null

      option = {
        title: {
          text: '学院劳动实践类别完成率柱状图 ',
          // subtext: 'Fake Data',
          left: 'center',
          top: '0',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '40',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xys,
            name: '学院',
            axisLine: {
              lineStyle: {
                color: '#142452' // 修改 X 轴线的颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '百分比',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#142452'
              }
            }
          }
        ],
        textStyle: {
          color: '#fff'
        },
        series: series
      };


      barAll.setOption(option)

    }
  },
  filters: {
    getTime(time) {
      const now = new Date(time)
      let chineseNum = ['日', '一', '二', '三', '四', '五', '六']
      return `${now.getFullYear()}年${(now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() + 1)}月${(now.getDate()) < 10 ? '0' + (now.getDate()) : (now.getDate())}日 ${(now.getHours()) < 10 ? '0' + (now.getHours()) : (now.getHours())}:${(now.getMinutes()) < 10 ? '0' + (now.getMinutes()) : (now.getMinutes())}:${(now.getSeconds()) < 10 ? '0' + (now.getSeconds()) : (now.getSeconds())} 星期${chineseNum[now.getDay()]}`
    }
  }
}
</script>

<style lang="scss">
@import "/src/static/style_scss.scss";

body {
  margin: 0 !important;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.content {
  // margin: -8px;
  //width: auto;
  background: #00043a;
  padding: 8px !important;
  // background-image: url('./static/BG.png');
  //  background-position: center center;
  background-size: cover;
  background-position: center;
  /* 将图片居中显示 */
  // min-height: 95vh;
  /* 确保至少为视口高度 */
  // min-width: 98vw;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
</style>

<style scoped lang="scss">
body {
  margin: 0 !important;
}
.bgi {
  padding: 8px;
}
.borderStyle {
  height: 100%;
  overflow: hidden;
  border: 2px solid #2e6099;
}

.htmlFont {
  font-weight: bold;
  font-size: 30px;
  color: white;
  font-style: italic;
  padding: 10px;
}
/* 确保使用了 ::v-deep 来穿透作用域 */
::v-deep .my-dialog {
  /* 背景图片 */
  background: url('./static/BG.png') no-repeat center center / cover !important;
}

::v-deep .my-dialog .el-dialog__body {
  /* 移除默认的背景颜色 */
  background-color: transparent !important;
}

::v-deep .my-dialog .el-table {
  /* 设置表格的背景色为透明，如果你希望表格有背景色，可以在这里设置 */
  background-color: transparent !important;
}

::v-deep .my-dialog .el-table th,
::v-deep .my-dialog .el-table td {
  background: url('./static/BG.png') no-repeat center center / cover !important;
  /* 设置表头和单元格的背景色，这里使用了透明色，可以根据需要调整 */
  background-color: rgba(255, 255, 255, 0.1) !important;
  /* 设置文本颜色 */
  color: #fff1cc !important;
}

::v-deep .el-dialog {
  margin-top: 10vh !important;
  background: #00043a;

  .el-dialog__body {
    padding: 0 !important;
  }

  .el-dialog__header {
    // display: none;
    padding-top: 0 !important;
  }
  .el-dialog__close {
    color: #fff;
  }
}
::v-deep .el-table__cell {
    background-color: #00043a !important;
    color: #fff;
}
::v-deep .border-box-content {
  padding: 15px !important;
}
::v-deep .el-table {
  // visibility: hidden;
  width: 95% !important;
  max-width: 95% !important;
  margin: 12px !important;
}
</style>